<template>
  <!-- 生成坞修单 -->
  <el-dialog
    v-model="props.visible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('dockRepair.dialogTitle') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
          v-if="showSuccessBtn || showErrorBtn"
        />
      </div>
    </template>

    <div class="create">
<!--      <div
        class="title flexcc"
        v-if="showText"
      >
        {{ t('dockRepair.dialogText2') }}
      </div>-->

      <div class="detail mt-5">
        <div
          :class="['item', 'flexsb', { 'in-progress': item.state === 1 }, { completed: item.state === 2 }, { lose: item.state === 3 }]"
          v-for="(item, index) in createDetail"
          :key="index"
        >
          <div class="text">{{ t(item.text) }}</div>
          <div
            class="state"
            v-if="item.state"
          >
            {{ t(stateObj[item.state]) }}
          </div>
        </div>
      </div>

      <div
        class="progress mt-5"
        v-if="showText"
      >
        <el-progress
          :text-inside="true"
          :stroke-width="24"
          :percentage="percentage"
          color="#CA2A02"
          status="exception"
        />
      </div>
      <div
        class="flexcc mt-2"
        v-if="showText"
      >
        {{ t('dockRepair.dialogText3') }}
      </div>

      <div
        class="btn flexcc mt-5"
        v-if="showSuccessBtn || showErrorBtn"
      >
        <el-button
          v-if="showSuccessBtn"
          type="primary"
          color="#252628"
          @click="handleContinue"
        >
          {{ t('dockRepair.dialogText4') }}
        </el-button>
        <el-button
          v-if="showErrorBtn"
          type="primary"
          color="#252628"
          @click="handleClose"
        >
          {{ t('dockRepair.dialogText5') }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, unref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useDockRepair from '@/stores/dockRepair.js'
import { autoMateDockOrderApi } from '@/service/dockOrder'

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const store = useDockRepair()
const { setOrderInfoKey } = store

onMounted(() => {
  playProgress()
  getOrder()
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  shipId: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['close', 'handleContinue'])

const handleClose = () => {
  emit('close')
}

const cancel = () => {
  handleClose()
}
const confirm = () => {
  handleClose()
}

const handleContinue = () => {
  emit('handleContinue')
}

// 状态字典
const stateObj = ref({
  1: 'dockRepair.state1',
  2: 'dockRepair.state2',
  3: 'dockRepair.state3'
})
// 生成项
const createDetail = ref([
  {
    text: 'dockRepair.detail1',
    state: 0
  },
  {
    text: 'dockRepair.detail2',
    state: 0
  },
  {
    text: 'dockRepair.detail3',
    state: 0
  },
  {
    text: 'dockRepair.detail4',
    state: 0
  },
  {
    text: 'dockRepair.detail5',
    state: 0
  }
])
// 进度
const percentage = ref(0)
// 加载中的文字
const showText = ref(true)
// 加载成功的按钮
const showSuccessBtn = ref(false)
// 加载失败的按钮
const showErrorBtn = ref(false)

// 播放 加载过程
let playTimer = null // 定时器
const leastTime = 20 // 至少需要20秒
let detailIndex = 0
const playProgress = () => {
  const _createDetail = unref(createDetail)
  const s = (leastTime / _createDetail.length) * 1000

  const fn = () => {
    const num = Number((100 / _createDetail.length).toFixed(2))

    if (_createDetail[detailIndex]) {
      _createDetail[detailIndex].state = 1
    }

    if (_createDetail[detailIndex - 1]) {
      _createDetail[detailIndex - 1].state = 2
      percentage.value = Number((percentage.value + num).toFixed(2))
    }

    detailIndex++

    if (detailIndex === _createDetail.length) {
      clearInterval(playTimer)
      playTimer = null
    }
    return fn
  }
  playTimer = setInterval(fn(), s)
}

// 接口返回 是否成功
const isSuccess = ref(false)
// 接口返回 是否失败
const isError = ref(false)

// 实际时间
const realTimeNum = ref(0)
// 实际时间 定时器
let realTimer = null
// 获取 坞修单数据
const getOrder = () => {
  const fn = () => {
    realTimeNum.value++
    return fn
  }
  realTimer = setInterval(fn(), 1000)

  autoMateDockOrderApi({
    shipId: props.shipId,
    natureOfRepair: store.orderInfo.nature,
    dockOrderName: store.orderInfo.dockOrderName,
    dockOrderNameEn: store.orderInfo.dockOrderNameEn
  })
    .then(({ data }) => {
      isSuccess.value = true
      setOrderInfoKey('id', data)
    })
    .catch(() => {
      isError.value = true
    })
}

// 监听 接口是否完成、实际时间
watch([isSuccess, isError, realTimeNum], (n) => {
  if (n[1]) {
    const _createDetail = unref(createDetail)
    _createDetail[detailIndex - 1].state = 3

    clearInterval(playTimer)
    playTimer = null

    clearInterval(realTimer)
    realTimer = null

    showText.value = false
    showErrorBtn.value = true
  }
  if (n[2] >= leastTime) {
    percentage.value = 99

    if (n[0]) {
      percentage.value = 100

      const _createDetail = unref(createDetail)
      _createDetail.forEach((c) => (c.state = 2))

      clearInterval(playTimer)
      playTimer = null

      clearInterval(realTimer)
      realTimer = null

      setTimeout(() => {
        showText.value = false
        showSuccessBtn.value = true
      }, 1000)
    }
  }
})
</script>

<style scoped lang="scss">
.create {
  padding-bottom: 40px;
  .title {
    font-size: 18px;
    color: #252628;
    font-weight: bold;
  }
  .detail {
    padding: 0 120px;
    .item {
      padding: 10px 0;
      position: relative;
      &.in-progress::after,
      &.completed::after,
      &.lose::after {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        border-bottom: 1px dashed #a3a5a9;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      .text {
        font-weight: bold;
        color: #252628;
        background: #fff;
        position: relative;
        z-index: 2;
        padding: 0 5px;
      }
      .state {
        background: #fff;
        position: relative;
        z-index: 2;
        padding: 0 5px;
      }
      &.completed {
        .state {
          color: #40cc57;
        }
      }
    }
  }
  .progress {
    padding: 0 50px;
  }
  .btn {
    .el-button {
      height: 40px;
    }
  }
}
</style>
